<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div增加按钮</title>
    <style>
        .common-button {
            padding: 4px 6px 0 4px;
        }

        .common-txt {
            color: #606266;
            border: 0 solid transparent;
            background-color: transparent;
            padding: 4px 6px 0 4px;
        }

        /* 按钮点击时（激活状态）的样式 */
        .common-txt:active {
            background-color: #d9ecff; /* 点击时变为深绿色 */
            color: #c6e2ff;
        }

        /* 针对所有无序列表取消项目符号 */
        ul {
            list-style-type: none;
        }

        /* 或者针对特定类别的无序列表取消项目符号 */
        ul.custom-list {
            list-style-type: none;
        }

        /* 对于有序列表也是如此 */
        ol {
            list-style-type: none;
        }

        /* 或者针对特定类别的有序列表 */
        ol.special-list {
            list-style-type: none;
        }

        .clicked {
            color: #007bff; /* 点击后的字体颜色 */
        }
    </style>
    <script>
        const bookId = "book-id";
        const docId = "doc-id";
        window.onload = function () {
            const catalog = document.getElementById(bookId);
            const catalog1 = document.getElementById(docId);
            book(catalog)
            book(catalog1)
        }

        function book(catalog) {
            const childs = catalog.getElementsByTagName("ul");
            for (let i = 0; i < childs.length; i++) {
                const liList = childs[i].childNodes;
                for (let j = 0; j < liList.length; j++) {
                    if (liList[j].tagName === "LI") {
                        addEvent(liList[j]);
                    }
                }
            }
        }

        function addEvent(o) {
            let as = o.firstChild;
            if (o.children.length === 0) {
                return
            }
            let imgEl = getEleI("block");
            o.insertBefore(imgEl, as)
            imgEl.onclick = function (e) {
                const theEvent = window.event || e;
                const link = theEvent.srcElement ? theEvent.srcElement : theEvent.target;
                const parentNode = link.parentNode;
                const uls = parentNode.childNodes;
                let disStr = " "
                for (let i = 0; i < uls.length; i++) {
                    const childEl = uls[i]
                    if (childEl.tagName === "UL") {
                        if (childEl.style.display === "none") {
                            childEl.style.display = "block";
                            disStr = "block";
                        } else {
                            childEl.style.display = "none";
                            disStr = "none";
                        }
                    }
                }
                const imgEl = parentNode.firstChild;
                if (disStr === "block") {
                    imgEl.src = 'down.svg'
                } else if (disStr === 'none') {
                    imgEl.src = 'up.svg'
                }
            }
        }

        function getEleI(str) {
            let resultI = document.createElement("img")
            resultI.style.cssText = '--color: inherit;height: 1rem;width: 1rem;line-height: 1rem;display: inline-flex;justify-content: center;align-items: center;position: relative;fill: currentColor;color: var(--color);font-size: inherit;';
            resultI.className = "menu-operator-i"
            // resultI.innerText = "收"
            if (str === 'block') {
                resultI.src = 'down.svg'
            } else {
                resultI.src = 'up.svg'
            }
            return resultI
        }

        let open_svg_path = 'M74.382 40.5H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881A8.333 8.333 0 0 0 74.382 40.5Zm0 134H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881a8.333 8.333 0 0 0-5.892-14.226ZM125 41h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 77h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 78h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Z'
        let close_svg_path = 'M26 41h204c5.523 0 10 4.477 10 10s-4.477 10-10 10H26c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 155h204c5.523 0 10 4.477 10 10s-4.477 10-10 10H26c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm93-78h111c5.523 0 10 4.477 10 10s-4.477 10-10 10H119c-5.523 0-10-4.477-10-10s4.477-10 10-10ZM16.4 103.318v49.764a8.333 8.333 0 0 0 14.226 5.892l24.881-24.881a8.333 8.333 0 0 0 0-11.786L30.626 97.426a8.333 8.333 0 0 0-14.226 5.892Z'
        let doc_switch = true

        function test() {
            let path = document.getElementById("doc-button-path")
            if (doc_switch) {
                path.setAttribute('d', open_svg_path);
                treeClose("book-id")
            } else {
                path.setAttribute('d', close_svg_path);
                treeOpen("book-id")
            }
            doc_switch = !doc_switch
        }

        function test1() {
            let path = document.getElementById("doc-button-path-1")
            if (doc_switch) {
                path.setAttribute('d', open_svg_path);
                treeClose("doc-id")
            } else {
                path.setAttribute('d', close_svg_path);
                treeOpen("doc-id")
            }
            doc_switch = !doc_switch
        }

        function treeClose(treeId) {
            for (let child of document.getElementById(treeId).getElementsByTagName("ul")) {
                if (child.tagName === "UL" && child.className !== 'sectlevel1') {
                    const imgEl = child.parentNode.firstChild;
                    imgEl.src = 'up.svg'
                    child.style.display = "none";
                }
            }
        }

        function treeOpen(treeId) {
            for (let child of document.getElementById(treeId).getElementsByTagName("ul")) {
                if (child.tagName === "UL" && child.className !== 'sectlevel1') {
                    const imgEl = child.parentNode.firstChild;
                    imgEl.src = 'down.svg'
                    child.style.display = "block";
                }
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            const topLevelListItems = document.querySelectorAll('ul.sectlevel1 > li');

            topLevelListItems.forEach(function (item) {
                item.addEventListener('click', function () {
                    this.classList.toggle('clicked');
                });
            });
        });
    </script>
</head>
<body>

<div id="book-id">
    <button class="common-txt" onclick="test()" title="目录收起、展开" style="margin-left: 60px">
        <svg width="1em" height="1em" viewBox="0 0 256 256"
             xmlns="http://www.w3.org/2000/svg"
             class="larkui-icon larkui-icon-catalog-expand CatalogTreeCollapseTrigger-module_icon_k49Ct">
            <path d="M74.382 40.5H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881A8.333 8.333 0 0 0 74.382 40.5Zm0 134H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881a8.333 8.333 0 0 0-5.892-14.226ZM125 41h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 77h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 78h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Z"
                  fill="currentColor" fill-rule="evenodd" id="doc-button-path"/>
        </svg>
    </button>

    <ul class="sectlevel1" style="margin-left: 0">
        <li>1. 页面目录
            <ul class="sectlevel2">
                <li>1.1.用户获取请求
                    <ul class="sectlevel3">
                        <li>1.1.1. 请求curl</li>
                        <li>1.1.2. 请求curl</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>2. 这是标题</li>
        <li>3. 通用返回对象</li>
        <li>4. 用户测试
            <ul class="sectlevel2">
                <li>4.1. 用户获取请求
                    <ul class="sectlevel3">
                        <li>4.1.1. 请求curl</li>
                        <li>4.1.2. 请求curl</li>
                    </ul>
                </li>
                <li>4.2. 用户获取请求
                    <ul class="sectlevel3">
                        <li>4.2.1. 请求curl</li>
                        <li>4.2.2. 请求curl</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

<div id="doc-id">
    <button class="common-txt" onclick="test1()" title="目录收起、展开" style="margin-left: 60px">
        <svg width="1em" height="1em" viewBox="0 0 256 256"
             xmlns="http://www.w3.org/2000/svg"
             class="larkui-icon larkui-icon-catalog-expand CatalogTreeCollapseTrigger-module_icon_k49Ct">
            <path d="M74.382 40.5H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881A8.333 8.333 0 0 0 74.382 40.5Zm0 134H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881a8.333 8.333 0 0 0-5.892-14.226ZM125 41h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 77h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 78h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Z"
                  fill="currentColor" fill-rule="evenodd" id="doc-button-path-1"/>
        </svg>
    </button>

    <ul class="sectlevel1" style="margin-left: 0">
        <li>1. 页面目录
            <ul class="sectlevel2">
                <li>1.1.用户获取请求
                    <ul class="sectlevel3">
                        <li>1.1.1. 请求curl</li>
                        <li>1.1.2. 请求curl</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>2. 这是标题</li>
        <li>3. 通用返回对象</li>
        <li>4. 用户测试
            <ul class="sectlevel2">
                <li>4.1. 用户获取请求
                    <ul class="sectlevel3">
                        <li>4.1.1. 请求curl</li>
                        <li>4.1.2. 请求curl</li>
                    </ul>
                </li>
                <li>4.2. 用户获取请求
                    <ul class="sectlevel3">
                        <li>4.2.1. 请求curl</li>
                        <li>4.2.2. 请求curl</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>